<template>
  <div style="margin-top: 5px">
    <titleBox text="报警事件统计分析" @click="show = !show"></titleBox>
    <div class="content" :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 10px; border: 1px solid #11afc180">
        <div ref="echartBox" id="echart" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import * as echarts from "echarts"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
onMounted(() => {
  myChart.value = echarts.init(echartBox.value)
  getData()
})
const content = ref(null)
const echartBox = ref(null)
const myChart = ref(null)
const height = ref(0)
const show = ref(false)
const getData = async () => {
  const res = await $api.get("api/index/appealStatistics")
  if (res.code === 1) {
    console.log(res.data)

    list.value = res.data.statistics
    getOption()
    nextTick(() => {
      height.value = content.value.offsetHeight
    })
  }
}

const colorArr = [
  [
    { offset: 0, color: "#D04E1E" },
    { offset: 1, color: "#D66737" }
  ],
  [
    { offset: 0, color: "#D0A11E" },
    { offset: 1, color: "#D9B85A" }
  ],
  [
    { offset: 0, color: "#1ED02D" },
    { offset: 1, color: "#7EF288" }
  ],
  [
    { offset: 0, color: "#1ED0A4" },
    { offset: 1, color: "#84F7DA" }
  ],
  [
    { offset: 0, color: "#49AAFF" },
    { offset: 1, color: "#79A2FF" }
  ],
  [
    { offset: 0, color: "#0D46FF" },
    { offset: 1, color: "#6778EC" }
  ]
]

const list = ref([])
const getOption = () => {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    // grid: {
    //   left: "3%",
    //   right: "4%",
    //   bottom: "3%", // 增加底部空间，为dataZoom留出更多位置
    //   top: "5%",
    //   containLabel: true
    // },
    xAxis: {
      data: list.value.map((item) => item.name),
      axisLabel: {
        interval: 0,
        rotate: 45, // 当数据过多时旋转标签
        formatter: function (value) {
          // 字数过多时截断，只保留前4个字符并加上省略号
          if (value.length > 4) {
            return value.substring(0, 4) + "..."
          }
          return value
        }
      }
    },
    yAxis: {
      splitLine: {
        show: false // 设置为false不显示分割线
      }
    },
    dataZoom: [],
    series: [
      {
        data: list.value.map((item, index) => {
          return {
            value: item.count,
            percentage: item.percentage,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorArr[index]),
              borderRadius: [20, 20, 0, 0]
            }
          }
        }),
        type: "bar",
        barWidth: "40%",
        // barWidth: list.value.length > 20 ? "60%" : "40%", // 根据数据量调整柱子宽度
        label: {
          show: true,
          position: "top",
          formatter: function (params) {
            // const item = list.value[params.dataIndex]
            // return `${params.value}起 \n ${item.percentage || ""}%`
            return `${params.value}起 \n ${params.percentage || 0}%`
          },
          fontSize: 10, // 设置较小的字体大小
          color: "#D5F2FF" // 设置字体颜色，与页面风格一致
        }
      }
    ]
  }
  myChart.value.setOption(option)
}
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;

  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  .item {
    display: inline-block;
    width: 150px;

    margin-right: 5px;

    .img {
      width: 150px;
      height: 100px;
    }

    .title {
      color: #d5f2ff;
      margin: 5px 0;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

#outer-container {
  width: 100%;
  /* 设置外部容器宽度 */
  overflow: hidden;
  /* 隐藏溢出部分 */
}

#inner-container {
  display: inline-block;
  white-space: nowrap;
  /* 防止文字换行 */
  animation: scrollLeft 20s linear infinite;
  /* 使用动画让整个容器向左滚动 */
}

// .item {
//   display: inline-block;
//   width: 100px;
//   height: 100px;
//   background-color: lightblue;
//   margin: 5px;
// }

/* 定义动画 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
  }
}
</style>
